<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="pdfium.js"></script>
    <script src="pdfium_render_wasm_example.js"></script>
</head>

<body>
    <canvas id="canvas" style="max-width: 100%; height: auto; border: 1px solid black;"></canvas>

    <script>
        // The Rust sample code that accompanies this file can be found in wasm.rs.

        // We export two functions from our Rust code via #[wasm_bindgen] declarations.
        // We'll call these two functions below from Javascript - but first, we need to get
        // the WASM modules for Pdfium and pdfium-render talking to each other.

        // First, we initialize Pdfium's Emscripten-wrapped WASM module. The exact way in which
        // we do this depends on the way in which the Pdfium WASM module was built.
        // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases
        // _before_ version V5407, the Pdfium WASM module can be initialized like this:

        // Module.onRuntimeInitialized = (async _ => {
        //    pdfiumModule = Module;

        // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases
        // _after or including_ version V5407, the Pdfium WASM module can be initialized like this:

        // PDFiumModule().then(async pdfiumModule => {

        // No other changes are required. The remainder of this example assumes we are using
        // V5407 or later.

        PDFiumModule().then(async pdfiumModule => {
            // Pdfium's WASM module has now been loaded and initialized. We need to tell
            // pdfium-render about Pdfium's WASM module, so it can bind to the Pdfium API
            // functions exported by the module.

            // In addition to any functions exported by our Rust application, pdfium-render will
            // always export an initialization function, initialize_pdfium_render(),
            // which _must_ be called from Javascript prior to the use of any Pdfium functionality.

            const {
                initialize_pdfium_render,       // Always provided by pdfium-render
                log_page_metrics_to_console,    // Defined by us ...
                get_image_data_for_page         // ... in examples/wasm.rs
            } = wasm_bindgen;

            // Next, we load the WASM module generated by wasm-pack that contains our Rust
            // application and pdfium-render.

            wasm_bindgen('pdfium_render_wasm_example_bg.wasm').then(async rustModule => {
                // The functions exported by our Rust application are now loaded and available.

                // First, we call pdfium-render's exported initialize_pdfium_render() function,
                // passing in the WASM modules for both Pdfium and our Rust application, along
                // with a debug flag. pdfium-render will bind to the functions it needs from the
                // Pdfium WASM module and return a boolean value indicating success or failure.

                console.assert(
                    initialize_pdfium_render(
                        pdfiumModule, // Emscripten-wrapped Pdfium WASM module
                        rustModule, // wasm_bindgen-wrapped WASM module built from our Rust application
                        false, // Debugging flag; set this to true to get tracing information logged to the Javascript console
                    ),
                    "Initialization of pdfium-render failed!"
                );

                // Now we can call the Rust functions we exported in example/wasm.rs.

                // The first function dumps sizing metrics for each page in our target PDF file
                // to the console. The file will be retrieved over the network using the browser's
                // built-in fetch() function.

                const targetDocument = "./test.pdf";

                await log_page_metrics_to_console(targetDocument);

                // The second function generates the ImageData object for a single page in
                // our target PDF file. We can render this ImageData directly to an HTML canvas.

                const pageIndex = 0; // Zero-based index of the page we wish to render.
                const width = 1414;
                const height = 1999;

                const canvas = document.getElementById("canvas");

                canvas.width = width;
                canvas.height = height;

                const context = canvas.getContext("2d");

                const imageData = await get_image_data_for_page(targetDocument, pageIndex, width, height);

                context.putImageData(imageData, 0, 0);
            });
        });
    </script>
</body>

</html>